<template>
  <el-dialog v-el-drag-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="handleClose" width="50%">
    <div class="class-dialog" v-loading="!async">
      <el-form v-if="async" @submit.native.prevent>
        <el-form-item label="上一级分类" v-if="async&&viewModel&&viewModel.relation">
          <x-code v-if="viewModel.fatherRelation">{{viewModel.fatherRelation.name}}</x-code>
          <x-code v-else>无</x-code>
          <div class="class-intro">可在分类管理中,拖动修改分类的上下级关系</div>
        </el-form-item>
        <el-form-item label="名称" :required="true">
          <el-input v-model="viewModel.relation.name" size="medium" maxlength="10" placeholder="请输入分类名称(10个字以内)"></el-input>
          <div class="class-intro">分类名称(10个字以内)</div>
        </el-form-item>
        <el-form-item label="图片/图标">
          <x-select-image v-model="viewModel.relation.icon" :cssStyle="screen"></x-select-image>
          <div class="class-intro">请上传分类图片,建议尺寸100px*100px 大小40Kb内</div>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="viewModel.relation.isEnable"></el-switch>
          <div class="class-intro">不启用时前台不显示</div>
        </el-form-item>
      </el-form>
      <div class="edit-line" v-if="async">
        <zk-auto-form :serviceConfig="viewModel.autoForm" v-if="async" @saveForm="saveForm" ref="zkAutoForm"></zk-auto-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import ala from 'ala'
  import servcie from '../service/index'
  import elDragDialog from '@/service/directives/el-dragDialog'
  export default {
    directives: { elDragDialog },
    props: {
      type: {},
      title: {}
    },
    data () {
      return {
        viewModel: null,
        isAdd: true,
        dialogFormVisible: false,
        async: false,
        screen: {
          width: '100px',
          height: '100px'
        }
      }
    },

    methods: {
      async init (id, fatherId) {
        this.async = false
        this.viewModel = null
        this.dialogFormVisible = true
        this.isAdd = true
        if (id > 0) {
          this.isAdd = false
        }
        this.viewModel = await servcie.view(id, fatherId)
        if (this.viewModel && this.viewModel) {
          this.async = true
        }
      },
      handleClose () {
        this.dialogFormVisible = false
      },
      async saveForm (models) {
        this.viewModel.relation.value = JSON.stringify(models)
        var response = await this.$admin.relationSave(this.viewModel.relation)
        if (response) {
          this.$ala.toast('保存成功')
          this.$emit('saveForm', response, this.isAdd)
          this.handleClose()
        }
        if (this.$refs.zkAutoForm) {
          this.$refs.zkAutoForm.setSaveStatus(false)
        }
      }
    }
  }
</script>



<style rel="stylesheet/scss" lang="scss">
  .class-dialog {
    width: 98%;
    min-height: 500px;
    margin-top: 10px;
    .class-intro {
      font-size: 11px;
      color: #8592a6;
      line-height: 14px;
    }
    .edit-line {
      margin-left: -20px;
    }
  }
</style>
